<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
    <style>
        body{
            margin-bottom:500px;
        }
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p>{{msg}}</p>
        <input type="text" :value="msg" @input="msg=$event.target.value">
        <input type="text" v-model="msg">
        <p>color:{{color}}</p>
        <input type="color" :value="color" @change="color=$event.target.value">
        <input type="color" :value="color" @input="color=$event.target.value">
        <input type="color" v-model="color">
        <p>date:{{date}}</p>
        <input type="date" :value="date" @change="date=$event.target.value">
        <input type="date" :value="date" @input="date=$event.target.value">
        <input type="date" v-model="date">
        <p>range:{{range}}</p>
        <input type="range" max=10 min=0 step=1 :value="range" @change="range=$event.target.value">
        <input type="range" max=10 min=0 step=1 :value="range" @input="range=$event.target.value">
        <input type="range" max=10 min=0 step=1 v-model="range">
        <hr>
        <p>info:{{info}}</p>
        <textarea cols="30" rows="10">{{info}}</textarea>
        <textarea cols="30" rows="10" :value="info"></textarea>
        <textarea cols="30" rows="10" value="info"></textarea>
        <textarea cols="30" rows="10" @input="info=$event.target.value">{{info}}</textarea>
        <textarea cols="30" rows="10" :value="info" @input="info=$event.target.value"></textarea>
        <textarea cols="30" rows="10" v-model="info"></textarea>
        <textarea cols="30" rows="10" v-model="info">jjajadkakk</textarea>
        <hr>
        <p>radioFlag:{{radioFlag}}</p>
        <input type="radio" value="M" :checked="radioFlag" @change="radioFlag=true">
        <input type="radio" value="F" :checked="radioFlag" @change="radioFlag=true">
        <input type="radio" value="X" :checked="radioFlag" @change="radioFlag=true">
        <p>radioData:{{radioData}}</p>
        <input type="radio" value="M" :checked="radioData=='M'" @change="radioData=$event.target.value">
        <input type="radio" value="F" :checked="radioData=='F'" @change="radioData=$event.target.value">
        <input type="radio" value="X" :checked="radioData=='X'" @change="radioData=$event.target.value"><br>
        <input type="radio" value="M" v-model="radioData">
        <input type="radio" value="F" v-model="radioData">
        <input type="radio" value="X" v-model="radioData"><br>
        <input type="radio" v-model="radioData1">
        <input type="radio" v-model="radioData1">
        <input type="radio" v-model="radioData1"><br>
        <hr>
        <p>checkbox:{{checkbox}}</p>
        <input type="checkbox" value="S" v-model="checkbox">
        <input type="checkbox" value="R" v-model="checkbox">
        <input type="checkbox" value="C" v-model="checkbox">
        <input type="checkbox" value="T" v-model="checkbox">
        <p>checkData:{{checkData}}</p>
        <input type="checkbox" :checked="checkFlag" @change="checkData=!checkData">
        <input type="checkbox" :checked="checkFlag" @change="checkData=!checkData">
        <input type="checkbox" :checked="checkFlag" @change="checkData=!checkData">
        <input type="checkbox" :checked="checkFlag" @change="checkData=!checkData"><br>
        <p>checkbox:{{checkbox1}}</p>
        <input type="checkbox" value="S" :checked="checkbox1.indexOf('S')!=-1" @change="checkArr($event.target.value)">
        <input type="checkbox" value="R" :checked="checkbox1.indexOf('R')!=-1" @change="checkArr($event.target.value)">
        <input type="checkbox" value="C" :checked="checkbox1.indexOf('C')!=-1" @change="checkArr($event.target.value)">
        <input type="checkbox" value="T" :checked="checkbox1.indexOf('T')!=-1" @change="checkArr($event.target.value)">
        <p>checkData1:{{checkData1}}</p>
        <input type="checkbox" true-value="同意协议" false-value="不同意协议" v-model="checkData1">
        <hr>
        <p>selectData:{{selectData}}</p>
        <select value="selectData" @change="selectData=$event.target.value">
            <!-- <option value="1">a</option>
            <option value="2">b</option>
            <option value="3">c</option> -->
            <option >a</option>
            <option >b</option>
            <option value="3">c</option>
        </select>
        <select v-model="selectData">
            <option value="1">a</option>
            <option >b</option>
            <option >c</option>
            <option value="4">d</option>
        </select>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"初始值",
            color:"",
            date:"",
            range:0,
            info:"初始info",
            radioFlag:false,
            radioData:"",
            radioData1:"",
            // checkbox:""
            checkbox:[],
            checkData:false,
            checkFlag:false,
            checkbox1:[],
            checkData1:"",
            selectData:""
        },
        methods:{
            checkArr(e){
                if(this.checkbox1.indexOf(e)!=-1){
                    this.checkbox1.splice(this.checkbox1.indexOf(e),1);
                }else{
                    this.checkbox1.push(e);
                }
            }
        }
    })
</script>
</html>